<template>
  <v-layout type="main">
    <!-- <p class="page-title"  @click="$router.push({ path: '/dataset' })" >数据仓库</p> -->
    <!-- <div class="detail-box" v-if="!$route.meta.hideDetails">
      <div class="pic">
        <v-image class="avatar" :src="detailData.avatar" alt="" />
      </div>
      <div class="word">
        <h3 class="title">

          <h3 class="info-title"> {{ detailData.name }}<i class="el-icon-edit-outline alick-btn-edit"
              @click="updateBase" /></h3>
          <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/dataset' })" />

        </h3>

        <div class="desc-container">
          <p class="text" :style="{ overflow: visible ? 'auto' : 'hidden', maxHeight: visible ? '240px' : '88px' }">
            {{ detailData.desc }}
          </p>
          <button class="toggle-button" @click="visible = !visible">{{ visible ? '收起' : '展开' }}</button>
        </div>

        <div class="code-info">
          <ul class="info-item">
            <li>
              <span class="key">挂载地址： </span>
              <span class="val">/dataset/{{ detailData.alias }}</span>
            </li>
            <li>
              <span class="key"> 创建人： </span>
              <span class="val">{{ detailData.create_user && (detailData.create_user.nick_name ||
                detailData.create_user.username) }}</span>
            </li>
            <li>
              <span class="key">创建时间： </span>
              <span class="val">{{ detailData.create_time }}</span>
            </li>
          </ul>
        </div>

        <div class="alick-handle-btns">
          <a class="handle-btn" href="javascript:;" @click="exportMarket">发布到AI市场</a>
        </div>
      </div>
    </div> -->

    <div class="detail-box">
      <div class="rollback" @click="$router.push('/dataset')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="code-desc-header">
          <div class="title">
            <div class="title-header">
              <span>{{ detailData.name }}</span>
              <!-- <i class="el-icon-edit-outline alick-btn-edit" @click="updateBase" /> -->
            </div>

            <div class="code-tags">
              <div class="user-tag tag">
                <img src="~@/assets/img/user.png" alt="">
                {{
                  detailData.create_user && (detailData.create_user.nick_name ||
                    detailData.create_user.username)
                }}
              </div>

              <div class="time-tag tag">
                <span>开始时间：</span>
                {{ detailData.create_time }}
              </div>

              <div class="time-tag tag">
                <span>更新时间：</span>
                {{ detailData.update_time }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="btns-container">
        <div class="alick-handle-btns">
          <el-button class="handle-btn" type="success" size="medium" @click="exportMarket">
            发布到AI市场
          </el-button>
        </div>
      </div>
    </div>

    <!-- <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike" v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.meta.title }}</span>
      </el-radio-button>
    </el-radio-group> -->
    <div class="tabs-left">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs>
    </div>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :detailData="detailData" v-if="detailData" />
    </div>

    <!-- <el-dialog :visible.sync="showUpdateBaseDialog" title="数据集基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input type="text" v-model="addForm.alias" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="addForm.desc" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

  </v-layout>
</template>

<script>
import { getDataSetDetail, publish } from '@/api/dataset'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: {},
      // addForm: {},
      // showUpdateBaseDialog: false,
      // submitRules: {
      //   name: [
      //     { required: true, message: "该项为必填项" },
      //     { required: true, min: 2, max: 40, message: "长度在2到40个字符" },
      //   ],
      //   alias: [
      //     { required: true, min: 5, max: 25, message: "长度在5到25个字符" },
      //   ],
      //   desc: [
      //     { required: true, message: "该项为必填项" },
      //     { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
      //   ],
      // },
      visible: false,
    };
  },
  methods: {
    skip() {
      let path = `/dataset/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getDetail() {
      if (!this.$route.query.id) return
      let res = await getDataSetDetail(this.$route.query.id);
      if (res && res.data) {
        this.detailData = res.data;
        this.addForm = JSON.parse(JSON.stringify(this.detailData))
      }
    },
    update() {
      let query = {
        id: this.detailData.id
      }
      this.$router.push({
        path: '/dataset/detail',
        query
      })
    },
    async exportMarket() {
      let res = await publish(this.detailData.id);
      if (res && res.data) {
        console.log('发布成功,等待审核')
      }
      let query = {
        active: 0
      }
      this.$router.push({
        path: '/my_market',
        query
      })
    },
    // updateBase() {
    //   this.showUpdateBaseDialog = true
    // },
    // avatarPath(data) {
    //   this.addForm.avatar = data;
    // },
    // commitBase() {
    //   this.$refs.form.validate(async (valid) => {
    //     if (valid) {
    //       let res = await putDataSet(this.addForm);
    //       if (res && res.data) {
    //         this.getDetail()
    //         this.showUpdateBaseDialog = false
    //       }
    //     }
    //   })
    // },
    // cancel() {
    //   this.showUpdateBaseDialog = false
    // }
  },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'dataset' && e.children
    )
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
  },

  destroyed() {

  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>
